<template>
  <view class="count-down" :class="[formattedMinutes == 0 && formattedSeconds == 0 ? 'hide' : '', className]">
    <!-- 显示格式化的倒计时 -->
    <text class="t1">剩</text>
    <text class="num">{{ formattedMinutes }}</text>
    <text class="colon">分</text>
    <text class="num">{{ formattedSeconds }}</text>
    <text class="t2">秒自动关闭</text>
  </view>
</template>

<script>
export default {
  name: 'CountDown',
  props: {
    // 初始分钟数（必填）
    minutes: {
      type: Number,
      required: true,
      default: 0
    },
    // 初始秒数（必填）
    seconds: {
      type: Number,
      required: true,
      default: 0
    },
    className:{
      type: String,
      default: '', // 1-详情，2-列表
    },
  },
  data() {
    return {
      totalSeconds: 0, // 总秒数（计算后）
      timer: null // 定时器
    };
  },
  computed: {
    // 格式化分钟（补0为两位数）
    formattedMinutes() {
      const minutes = Math.floor(this.totalSeconds / 60);
      return minutes.toString().padStart(2, '0');
    },
    // 格式化秒数（补0为两位数）
    formattedSeconds() {
      const seconds = this.totalSeconds % 60;
      return seconds.toString().padStart(2, '0');
    }
  },
  created() {
    // 初始化总秒数
    this.totalSeconds = this.minutes * 60 + this.seconds;
    // 启动倒计时
    this.startTimer();
  },
  beforeDestroy() {
    // 页面销毁时清除定时器（防止内存泄漏）
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    startTimer() {
      // 立即执行一次（避免1秒延迟）
      this.updateCountdown();
      
      // 每秒更新一次
      this.timer = setInterval(() => {
        this.updateCountdown();
      }, 1000);
    },
    updateCountdown() {
      if (this.totalSeconds <= 0) {
        // 倒计时结束：清除定时器 + 触发结束事件
        clearInterval(this.timer);
        this.$emit('countdown-end'); // 向父组件传递结束信号
        return;
      }
      // 每秒减1
      this.totalSeconds--;
    }
  }
};
</script>

<style scoped lang="scss">
.count-down {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  font-size: 28rpx; letter-spacing: 2rpx; color: #EA1D1B;
  &.time{color: #ffffff; font-size: 30rpx; padding: 40rpx 0;}
  &.list-time{font-size: 26rpx; color: #EA1D1B;}
  &.hide{display: none;}
}

.num {
  
  margin: 0 10rpx;
}

.colon {
  font-size: 36rpx;
}
</style>